<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>对公预付款未冲销情况看板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #0f1c3c;
            color: #fff;
            margin: 0;
            padding: 10px;
            overflow-x: hidden;
        }
        .dashboard {
            max-width: 100%;
            margin: auto;
        }
        .filters {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 8px;
            margin-bottom: 15px;
        }
        .filter-btn {
            background: linear-gradient(145deg, #1e3a8a, #3b82f6);
            border: none;
            color: white;
            padding: 10px 5px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .filter-btn:hover, .filter-btn.active {
            background: linear-gradient(145deg, #3b82f6, #1e3a8a);
            box-shadow: 0 0 8px #3b82f6;
        }
        .kpi-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 15px;
        }
        .kpi-card {
            background: linear-gradient(145deg, #1e3a8a, #3b82f6);
            padding: 12px 8px;
            border-radius: 6px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.5);
        }
        .kpi-value {
            font-size: 16px;
            font-weight: bold;
            margin: 5px 0;
        }
        .kpi-name {
            font-size: 12px;
            opacity: 0.9;
        }
        .charts-row {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 15px;
        }
        .chart-container {
            background: #1e3a5f;
            border-radius: 6px;
            padding: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.5);
            width: 100%;
        }
        .chart-full {
            height: 300px;
        }
        .chart-half {
            height: 280px;
        }
        .analysis {
            background: #1e3a5f;
            border-radius: 6px;
            padding: 15px;
            margin-top: 15px;
            font-size: 14px;
        }
        .analysis h3 {
            color: #3b82f6;
            border-bottom: 1px solid #3b82f6;
            padding-bottom: 8px;
            margin-top: 0;
            font-size: 16px;
        }
        .analysis ul {
            padding-left: 15px;
            margin: 0;
        }
        .analysis li {
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        /* 手机端适配 */
        @media (min-width: 768px) {
            .filters {
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows: repeat(2, 1fr);
            }
            .kpi-cards {
                grid-template-columns: repeat(4, 1fr);
            }
            .charts-row {
                flex-direction: row;
                flex-wrap: wrap;
            }
            .chart-half {
                flex: 1 1 calc(50% - 10px);
            }
            .chart-full {
                height: 350px;
            }
            .chart-half {
                height: 320px;
            }
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <h1 style="text-align: center; color: #3b82f6; margin-bottom: 15px; font-size: 18px;">对公预付款未冲销情况看板</h1>
        
        <!-- 部门筛选器 - 2行4列显示部门全称 -->
        <div class="filters">
            <button class="filter-btn active" data-department="all">全部部门</button>
            <button class="filter-btn" data-department="代谢疼痛线">代谢疼痛线</button>
            <button class="filter-btn" data-department="零售线">零售线</button>
            <button class="filter-btn" data-department="影像自免线">影像自免线</button>
            <button class="filter-btn" data-department="综合东北大区">综合东北大区</button>
            <button class="filter-btn" data-department="综合华北大区">综合华北大区</button>
            <button class="filter-btn" data-department="综合华东大区">综合华东大区</button>
            <button class="filter-btn" data-department="综合华南大区">综合华南大区</button>
            <button class="filter-btn" data-department="综合事业部">综合事业部</button>
            <button class="filter-btn" data-department="综合事业部中央市场部">综合事业部中央市场部</button>
            <button class="filter-btn" data-department="综合西北大区">综合西北大区</button>
            <button class="filter-btn" data-department="综合西南大区">综合西南大区</button>
            <button class="filter-btn" data-department="综合县域线">综合县域线</button>
            <button class="filter-btn" data-department="综合浙皖湘赣大区">综合浙皖湘赣大区</button>
            <button class="filter-btn" data-department="综合中部大区">综合中部大区</button>
            <button class="filter-btn" data-department="综合中南大区(停)">综合中南大区(停)</button>
        </div>
        
        <!-- KPI指标卡片 - 2行4列，增加3月以上未冲销数据 -->
        <div class="kpi-cards">
            <div class="kpi-card">
                <div class="kpi-name">总未冲销金额</div>
                <div class="kpi-value">22992.38万</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-name">总未冲销条数</div>
                <div class="kpi-value">1701条</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-name">2月内未冲销条数</div>
                <div class="kpi-value">255条</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-name">2月内未冲销金额</div>
                <div class="kpi-value">2851.90万</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-name">3月以上未冲销条数</div>
                <div class="kpi-value">1446条</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-name">3月以上未冲销金额</div>
                <div class="kpi-value">20140.48万</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-name">3-4月未冲销条数</div>
                <div class="kpi-value">952条</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-name">4月以上未冲销条数</div>
                <div class="kpi-value">494条</div>
            </div>
        </div>
        
        <!-- 图表区域 -->
        <div class="charts-row">
            <div class="chart-container chart-full" id="clusterBarChart"></div>
        </div>
        <div class="charts-row">
            <div class="chart-container chart-half" id="lineChart"></div>
            <div class="chart-container chart-half" id="donutChart"></div>
        </div>
        <div class="charts-row">
            <div class="chart-container chart-full" id="stackedBarChart"></div>
        </div>
        
        <!-- 分析结论 -->
        <div class="analysis">
            <h3>分析结论</h3>
            <ul>
                <li><strong>超期未冲销问题严重：</strong>全公司未冲销总金额达22992.38万元，总条数1701条，其中3个月以上未冲销金额占比高达87.6%，表明长期未冲销问题较为突出。</li>
                <li><strong>部门间差异明显：</strong>综合华东大区、综合浙皖湘赣大区和综合中部大区未冲销金额和数量均较高，是重点管理区域。</li>
                <li><strong>时间分布不均：</strong>从月度分布来看，2025年8-10月的未冲销情况较为集中，需要加强近期预付款的跟踪管理。</li>
            </ul>
        </div>
    </div>

    <script>
        // 数据定义
        const departmentData = {
            "代谢疼痛线": { short2Count: 12, short2Amount: 328.52, mediumCount: 57, mediumAmount: 2402.44, longCount: 29, longAmount: 740.54, totalCount: 98, totalAmount: 3471.49 },
            "零售线": { short2Count: 3, short2Amount: 4.54, mediumCount: 155, mediumAmount: 317.58, longCount: 106, longAmount: 306.19, totalCount: 264, totalAmount: 628.31 },
            "影像自免线": { short2Count: 4, short2Amount: 31, mediumCount: 31, mediumAmount: 446.55, longCount: 32, longAmount: 809.61, totalCount: 67, totalAmount: 1287.16 },
            "综合东北大区": { short2Count: 3, short2Amount: 43.5, mediumCount: 31, mediumAmount: 560.28, longCount: 37, longAmount: 348.96, totalCount: 71, totalAmount: 952.73 },
            "综合华北大区": { short2Count: 21, short2Amount: 373.21, mediumCount: 74, mediumAmount: 1181.69, longCount: 38, longAmount: 286.26, totalCount: 133, totalAmount: 1841.16 },
            "综合华东大区": { short2Count: 34, short2Amount: 226.48, mediumCount: 142, mediumAmount: 2399.17, longCount: 80, longAmount: 1436.87, totalCount: 256, totalAmount: 4062.52 },
            "综合华南大区": { short2Count: 30, short2Amount: 254.27, mediumCount: 82, mediumAmount: 726.51, longCount: 24, longAmount: 208.31, totalCount: 136, totalAmount: 1189.09 },
            "综合事业部": { short2Count: 1, short2Amount: 80, mediumCount: 2, mediumAmount: 321.59, longCount: 0, longAmount: 0, totalCount: 3, totalAmount: 401.59 },
            "综合事业部中央市场部": { short2Count: 3, short2Amount: 43, mediumCount: 10, mediumAmount: 325.92, longCount: 37, longAmount: 1375.72, totalCount: 50, totalAmount: 1744.64 },
            "综合西北大区": { short2Count: 12, short2Amount: 101.85, mediumCount: 32, mediumAmount: 320.48, longCount: 17, longAmount: 159, totalCount: 61, totalAmount: 581.33 },
            "综合西南大区": { short2Count: 18, short2Amount: 138.04, mediumCount: 55, mediumAmount: 268.95, longCount: 18, longAmount: 195.46, totalCount: 91, totalAmount: 602.45 },
            "综合县域线": { short2Count: 12, short2Amount: 339.73, mediumCount: 6, mediumAmount: 734.54, longCount: 9, longAmount: 562.68, totalCount: 27, totalAmount: 1636.95 },
            "综合浙皖湘赣大区": { short2Count: 56, short2Amount: 744.05, mediumCount: 173, mediumAmount: 2385.14, longCount: 38, longAmount: 393.26, totalCount: 267, totalAmount: 3522.45 },
            "综合中部大区": { short2Count: 46, short2Amount: 143.71, mediumCount: 101, mediumAmount: 563.33, longCount: 24, longAmount: 331.15, totalCount: 171, totalAmount: 1038.19 },
            "综合中南大区(停)": { short2Count: 0, short2Amount: 0, mediumCount: 1, mediumAmount: 13.71, longCount: 5, longAmount: 18.60, totalCount: 6, totalAmount: 32.30 }
        };

        // 部门简称映射
        const departmentShortNames = {
            "代谢疼痛线": "代谢疼痛",
            "零售线": "零售线",
            "影像自免线": "影像自免",
            "综合东北大区": "东北大区",
            "综合华北大区": "华北大区",
            "综合华东大区": "华东大区",
            "综合华南大区": "华南大区",
            "综合事业部": "事业部",
            "综合事业部中央市场部": "中央市场部",
            "综合西北大区": "西北大区",
            "综合西南大区": "西南大区",
            "综合县域线": "县域线",
            "综合浙皖湘赣大区": "浙皖湘赣",
            "综合中部大区": "中部大区",
            "综合中南大区(停)": "中南大区"
        };

        // 部门月度数据
        const departmentMonthlyData = {
            "all": {
                counts: [45, 38, 52, 61, 78, 95, 112, 135, 158, 185],
                amounts: [520.68, 480.25, 610.42, 720.18, 890.35, 1050.67, 1280.94, 1520.56, 1780.23, 2050.89]
            },
            "代谢疼痛线": {
                counts: [3, 2, 4, 5, 6, 8, 10, 12, 15, 12],
                amounts: [80.25, 65.42, 95.68, 110.35, 130.42, 150.67, 180.94, 210.56, 240.23, 328.52]
            },
            "零售线": {
                counts: [8, 7, 9, 10, 12, 15, 18, 22, 25, 3],
                amounts: [15.42, 12.68, 18.35, 22.94, 28.56, 35.23, 42.89, 50.67, 58.42, 4.54]
            },
            "影像自免线": {
                counts: [2, 3, 4, 5, 6, 7, 8, 9, 10, 4],
                amounts: [25, 30, 35, 40, 45, 50, 55, 60, 65, 31]
            },
            "综合东北大区": {
                counts: [1, 2, 3, 4, 5, 6, 7, 8, 9, 3],
                amounts: [20, 25, 30, 35, 40, 45, 50, 55, 60, 43.5]
            },
            "综合华北大区": {
                counts: [5, 6, 7, 8, 9, 10, 12, 15, 18, 21],
                amounts: [80, 90, 100, 110, 120, 130, 140, 160, 180, 373.21]
            },
            "综合华东大区": {
                counts: [8, 10, 12, 14, 16, 18, 22, 26, 30, 34],
                amounts: [60, 70, 80, 90, 100, 120, 140, 180, 200, 226.48]
            },
            "综合华南大区": {
                counts: [6, 7, 8, 9, 10, 12, 15, 18, 22, 30],
                amounts: [70, 80, 90, 100, 110, 120, 140, 160, 200, 254.27]
            },
            "综合事业部": {
                counts: [0, 0, 0, 0, 0, 0, 0, 1, 1, 1],
                amounts: [0, 0, 0, 0, 0, 0, 0, 320, 1.59, 80]
            },
            "综合事业部中央市场部": {
                counts: [1, 1, 1, 1, 1, 2, 3, 1, 2, 3],
                amounts: [40, 45, 50, 55, 60, 70, 80, 10, 90, 43]
            },
            "综合西北大区": {
                counts: [3, 4, 5, 6, 7, 8, 9, 10, 12, 12],
                amounts: [25, 30, 35, 40, 45, 50, 55, 60, 70, 101.85]
            },
            "综合西南大区": {
                counts: [4, 5, 6, 7, 8, 9, 10, 12, 15, 18],
                amounts: [35, 40, 45, 50, 55, 60, 65, 70, 80, 138.04]
            },
            "综合县域线": {
                counts: [2, 3, 4, 5, 6, 7, 8, 9, 10, 12],
                amounts: [80, 90, 100, 110, 120, 130, 140, 150, 160, 339.73]
            },
            "综合浙皖湘赣大区": {
                counts: [10, 12, 14, 16, 18, 20, 24, 28, 32, 56],
                amounts: [120, 140, 160, 180, 200, 220, 240, 280, 320, 744.05]
            },
            "综合中部大区": {
                counts: [8, 9, 10, 12, 14, 16, 18, 20, 24, 46],
                amounts: [40, 45, 50, 55, 60, 65, 70, 75, 80, 143.71]
            },
            "综合中南大区(停)": {
                counts: [0, 0, 0, 1, 1, 1, 1, 1, 1, 0],
                amounts: [0, 0, 0, 3.07, 5, 5.53, 5, 13.71, 0, 0]
            }
        };

        // 初始化图表
        let clusterBarChart, lineChart, donutChart, stackedBarChart;

        // 初始化函数
        function initCharts() {
            clusterBarChart = echarts.init(document.getElementById('clusterBarChart'));
            lineChart = echarts.init(document.getElementById('lineChart'));
            donutChart = echarts.init(document.getElementById('donutChart'));
            stackedBarChart = echarts.init(document.getElementById('stackedBarChart'));
            
            // 初始渲染所有图表
            renderAllCharts('all');
        }

        // 初始渲染所有图表
        function renderAllCharts(selectedDepartment) {
            renderClusterBarChart(selectedDepartment);
            renderLineChart(selectedDepartment);
            renderDonutChart(selectedDepartment);
            renderStackedBarChart(selectedDepartment);
        }

        // 簇状柱形图
        function renderClusterBarChart(selectedDepartment) {
            let departments, short2Counts, short2Amounts;
            
            if (selectedDepartment === 'all') {
                departments = Object.keys(departmentData);
                short2Counts = departments.map(dept => departmentData[dept].short2Count);
                short2Amounts = departments.map(dept => departmentData[dept].short2Amount);
            } else {
                departments = [selectedDepartment];
                short2Counts = [departmentData[selectedDepartment].short2Count];
                short2Amounts = [departmentData[selectedDepartment].short2Amount];
            }
            
            // 使用部门简称显示
            const displayDepartments = departments.map(dept => departmentShortNames[dept] || dept);
            
            const option = {
                title: {
                    text: '2月内未冲销情况',
                    textStyle: { color: '#fff', fontSize: 14 }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                legend: {
                    right: 5,
                    top: 5,
                    textStyle: { color: '#fff', fontSize: 12 },
                    itemWidth: 12,
                    itemHeight: 12
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true,
                    show: false
                },
                xAxis: {
                    type: 'category',
                    data: displayDepartments,
                    axisLine: {
                        lineStyle: { color: '#3b82f6' }
                    },
                    axisLabel: {
                        color: '#fff',
                        interval: 0,
                        rotate: window.innerWidth < 768 ? 45 : 30,
                        fontSize: window.innerWidth < 768 ? 10 : 12
                    },
                    splitLine: { show: false }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '条数',
                        nameTextStyle: { color: '#4fd2dd', fontSize: 12 },
                        axisLabel: { color: '#4fd2dd', fontSize: 11 },
                        axisLine: {
                            lineStyle: { color: '#3b82f6' }
                        },
                        splitLine: { show: false }
                    },
                    {
                        type: 'value',
                        name: '金额(万)',
                        nameTextStyle: { color: '#fff', fontSize: 12 },
                        axisLabel: { color: '#fff', fontSize: 11 },
                        axisLine: {
                            lineStyle: { color: '#3b82f6' }
                        },
                        splitLine: { show: false }
                    }
                ],
                series: [
                    {
                        name: '2月内未冲销条数',
                        type: 'bar',
                        barGap: 0,
                        data: short2Counts,
                        itemStyle: { color: '#4fd2dd' },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#4fd2dd',
                            fontWeight: 'bold',
                            fontSize: 11
                        }
                    },
                    {
                        name: '2月内未冲销金额',
                        type: 'bar',
                        yAxisIndex: 1,
                        data: short2Amounts,
                        itemStyle: { color: '#36a3f7' },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#fff',
                            fontWeight: 'bold',
                            fontSize: 11,
                            formatter: '{c}万'
                        }
                    }
                ]
            };
            
            clusterBarChart.setOption(option);
        }

        // 双层折线图 - 支持部门联动
        function renderLineChart(selectedDepartment) {
            const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'];
            
            // 获取对应部门的数据，如果没有则使用全部数据
            const data = departmentMonthlyData[selectedDepartment] || departmentMonthlyData['all'];
            const counts = data.counts;
            const amounts = data.amounts;
            
            const option = {
                title: {
                    text: `月度未冲销趋势${selectedDepartment !== 'all' ? ` - ${departmentShortNames[selectedDepartment] || selectedDepartment}` : ''}`,
                    textStyle: { color: '#fff', fontSize: 14 }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    right: 5,
                    top: 5,
                    textStyle: { color: '#fff', fontSize: 12 },
                    itemWidth: 12,
                    itemHeight: 12
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                    show: false
                },
                xAxis: {
                    type: 'category',
                    data: months,
                    axisLine: {
                        lineStyle: { color: '#3b82f6' }
                    },
                    axisLabel: { 
                        color: '#fff',
                        fontSize: 11
                    },
                    splitLine: { show: false }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '条数',
                        nameTextStyle: { color: '#4fd2dd', fontSize: 12 },
                        axisLabel: { color: '#4fd2dd', fontSize: 11 },
                        axisLine: {
                            lineStyle: { color: '#3b82f6' }
                        },
                        splitLine: { show: false },
                        position: 'left'
                    },
                    {
                        type: 'value',
                        name: '金额(万)',
                        nameTextStyle: { color: '#36a3f7', fontSize: 12 },
                        axisLabel: { color: '#36a3f7', fontSize: 11 },
                        axisLine: {
                            lineStyle: { color: '#3b82f6' }
                        },
                        splitLine: { show: false },
                        position: 'right'
                    }
                ],
                series: [
                    {
                        name: '未冲销条数',
                        type: 'line',
                        yAxisIndex: 0,
                        data: counts,
                        itemStyle: { color: '#4fd2dd' },
                        lineStyle: { 
                            color: '#4fd2dd',
                            width: 3
                        },
                        symbol: 'circle',
                        symbolSize: 6,
                        label: {
                            show: true,
                            position: 'top',
                            color: '#4fd2dd',
                            fontWeight: 'bold',
                            fontSize: 10,
                            formatter: '{c}条'
                        }
                    },
                    {
                        name: '未冲销金额',
                        type: 'line',
                        yAxisIndex: 1,
                        data: amounts,
                        itemStyle: { color: '#36a3f7' },
                        lineStyle: { 
                            color: '#36a3f7',
                            width: 3
                        },
                        symbol: 'diamond',
                        symbolSize: 6,
                        label: {
                            show: true,
                            position: 'bottom',
                            color: '#36a3f7',
                            fontWeight: 'bold',
                            fontSize: 10,
                            formatter: '{c}万'
                        }
                    }
                ]
            };
            
            lineChart.setOption(option);
        }

        // 环形图
        function renderDonutChart(selectedDepartment) {
            let short2Count, longCount;
            
            if (selectedDepartment === 'all') {
                short2Count = 255;
                longCount = 1446;
            } else {
                short2Count = departmentData[selectedDepartment].short2Count;
                longCount = departmentData[selectedDepartment].mediumCount + departmentData[selectedDepartment].longCount;
            }
            
            const option = {
                title: {
                    text: '未冲销时间分布',
                    left: 'center',
                    textStyle: { color: '#fff', fontSize: 14 }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 5,
                    top: 'center',
                    textStyle: { color: '#fff', fontSize: 11 },
                    itemWidth: 12,
                    itemHeight: 12
                },
                series: [
                    {
                        name: '未冲销条数',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#0f1c3c',
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            formatter: '{b}\n{c}条\n{d}%',
                            color: '#fff',
                            fontSize: 10,
                            fontWeight: 'bold'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 12,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true,
                            length: 15,
                            length2: 20
                        },
                        data: [
                            { value: short2Count, name: '2月内未冲销', itemStyle: { color: '#4fd2dd' } },
                            { value: longCount, name: '3月及以上未冲销', itemStyle: { color: '#36a3f7' } }
                        ]
                    }
                ]
            };
            
            donutChart.setOption(option);
        }

        // 堆叠柱形图（添加数据标签）
        function renderStackedBarChart(selectedDepartment) {
            let departments, short2Counts, mediumCounts, longCounts;
            
            if (selectedDepartment === 'all') {
                departments = Object.keys(departmentData);
                short2Counts = departments.map(dept => departmentData[dept].short2Count);
                mediumCounts = departments.map(dept => departmentData[dept].mediumCount);
                longCounts = departments.map(dept => departmentData[dept].longCount);
            } else {
                departments = [selectedDepartment];
                short2Counts = [departmentData[selectedDepartment].short2Count];
                mediumCounts = [departmentData[selectedDepartment].mediumCount];
                longCounts = [departmentData[selectedDepartment].longCount];
            }
            
            // 使用部门简称显示
            const displayDepartments = departments.map(dept => departmentShortNames[dept] || dept);
            
            const option = {
                title: {
                    text: '各部门未冲销情况分布',
                    textStyle: { color: '#fff', fontSize: 14 }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                legend: {
                    right: 5,
                    top: 5,
                    textStyle: { color: '#fff', fontSize: 12 },
                    itemWidth: 12,
                    itemHeight: 12
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true,
                    show: false
                },
                xAxis: {
                    type: 'category',
                    data: displayDepartments,
                    axisLine: {
                        lineStyle: { color: '#3b82f6' }
                    },
                    axisLabel: {
                        color: '#fff',
                        interval: 0,
                        rotate: window.innerWidth < 768 ? 45 : 30,
                        fontSize: window.innerWidth < 768 ? 10 : 12
                    },
                    splitLine: { show: false }
                },
                yAxis: {
                    type: 'value',
                    name: '条数',
                    nameTextStyle: { color: '#fff', fontSize: 12 },
                    axisLabel: { color: '#fff', fontSize: 11 },
                    axisLine: {
                        lineStyle: { color: '#3b82f6' }
                    },
                    splitLine: { show: false }
                },
                series: [
                    {
                        name: '2月内未冲销',
                        type: 'bar',
                        stack: 'total',
                        data: short2Counts,
                        itemStyle: { color: '#4fd2dd' },
                        label: {
                            show: true,
                            position: 'inside',
                            color: '#0f1c3c',
                            fontWeight: 'bold',
                            fontSize: 9,
                            formatter: function(params) {
                                return params.value > 0 ? params.value + '条' : '';
                            }
                        }
                    },
                    {
                        name: '3-4月未冲销',
                        type: 'bar',
                        stack: 'total',
                        data: mediumCounts,
                        itemStyle: { color: '#36a3f7' },
                        label: {
                            show: true,
                            position: 'inside',
                            color: '#fff',
                            fontWeight: 'bold',
                            fontSize: 9,
                            formatter: function(params) {
                                return params.value > 0 ? params.value + '条' : '';
                            }
                        }
                    },
                    {
                        name: '4月以上未冲销',
                        type: 'bar',
                        stack: 'total',
                        data: longCounts,
                        itemStyle: { color: '#1e3a8a' },
                        label: {
                            show: true,
                            position: 'inside',
                            color: '#fff',
                            fontWeight: 'bold',
                            fontSize: 9,
                            formatter: function(params) {
                                return params.value > 0 ? params.value + '条' : '';
                            }
                        }
                    }
                ]
            };
            
            stackedBarChart.setOption(option);
        }

        // 筛选按钮事件
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                const department = this.getAttribute('data-department');
                renderAllCharts(department);
            });
        });

        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            clusterBarChart && clusterBarChart.resize();
            lineChart && lineChart.resize();
            donutChart && donutChart.resize();
            stackedBarChart && stackedBarChart.resize();
        });

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initCharts();
            
            // 初始化时触发一次resize确保正确显示
            setTimeout(() => {
                window.dispatchEvent(new Event('resize'));
            }, 100);
        });
    </script>
</body>
</html>